2023最新八股文前端面试题 (css、js、h5c3) |
您所在的位置:网站首页 › js判断数据类型 objectprototype › 2023最新八股文前端面试题 (css、js、h5c3) |
HTML+CSS
1.说一下css的盒模型 在HTML页面中的所有元素都可以看成是一个盒子 盒模型的组成:是由内容、内边距、边框、外边距组成的 盒模型的类型: 标准盒模型 margin +border+padding +content IE盒模型 margin +content(border+ padding) box-sizing:content-box(默认值,标准盒模型)、border-box(IE盒模型) 2.CSS选择器的优先级? 优先级:写css样式的时候,会给同一个元素添加多个样式,此时谁的权重大就显示谁的样式 从大到小:!important>行内样式>id>类/伪类/属性>标签>全局选择器 3.隐藏元素有那些? 3.1元素在页面中消失,不占据空间 display:none 3.2设置的样式的透明为0,元素不可见,占据空间位置 opacity(哦爬斯几) :0 让元素消失,占据空间位置,一种不可见的状态 visibility(v斯白了提):hidden 4.px和rem的区别是什么? px是像素,显示器上给我们呈现画面的像素,每个像素的大小是一样的,绝对单位长度 rem,相对单位,相对于html根节点的font-size的值,直接给html节点的font-size:62.5%; 1rem=10px; (16px*62.5%=10px) 5重排和重绘有什么区别? 重排(回流)布局引擎会根据所有的样式计算出盒模型在页面上的位置和大小 重绘:计算好盒模型的位置、大小和其他一些属性之后,浏览器就会根据每个盒模型的特性进行绘制 浏览器的渲染机制 对DOM的大小、位置进行修改后,浏览器需要重新计算元素的这些几何属性,就叫重排 对DOM元素的样式进行修改,比如color和background-color,浏览器不需要重新计算几何属性的时候,直接绘制了该元素的新样式,那么这里就只触发了重绘 6.让一个元素水平垂直居中的方式有哪些? 1.定位+margin 2.定位+transform 3.flex布局 4.grid布局 5.table布局 7.CSS的那些属性可以继承?那些不可以继承? CSS的三大特性:继承、层叠、优先级 子元素可以继承父类元素的样式 1.字体的一些属性:font 2.文本的一些属性:line-height 3.元素的可见性:visibility:hidden 4.表格布局的属性:border-spacing 5.列表的属性:list-style 6.页面样式属性:page 7.声音的样式属性 8.有没有用过预处理器? 预处理语言增加了变量、函数、等强大的功能 SASS LESS javascript1.JS由那三部分组成? ECMAScript :JS核心内容 ,描述了语言的基础语法,比如var、for循环、数据类型(数组、字符串) 文档对象模型(Dom): Dom把整个HTML页面规划为元素构成文档 浏览器对象模型(Bom): 对浏览器窗口进行访问和操作 2.JS有哪些内置对象? String Boolean Number Array Object Function Math Date RegExp 常用 Math: abs() sqrt() random() max() min Date: new Date getFullYear() getMount() getHours() Array: indexOf() Array.isArray() sort() splice() includes() String: concat() length slice() split() 3.操作数组的方法有那些? push() pop() sort() splice() unshift() shift() reverse() concat() join() map() filter() every() some() reduce() Array.isArray() findIndex() 那些方法会改变原数组 push() pop() unshift() shift() sort() reverse() splice() 4.对数据类型的检测方式有哪些 typeof()、instanceof()、constructor、Object.prototype.toString.call() 4.1typeof() 对于基本数据类型没问题,遇到引用数据类型就不管用 console.log(typeof 666) //number console.log(typeof []) //object 明明是个数组 4.2instanceof() 只能判断引用数据类型,不能判断基本数据类型 console.log([] instanceof Arrat) //true console.log('abc' instanceof String) //false //明明是字符串 所有不能判断基本数据类型 4.3constructor 几乎可以判断基本数据类型和引用数据类型,如果生命了一个构造函数,并把它的原型指向了Array conlose.log(('abc').constructor===String) //true 4.4Object.prototype.toString.call() var opt=Object.prototype.toString console.log(opt.call(2)) // Number console.log(opt.call(true)) //Boolean console.log(opt.call('aaa')) // String console.log(opt.call([])) //Array 5.说一下闭包,闭包有什么特点? 函数嵌套函数,·函数被外部函数返回并保存下来时,就会产生闭包 特点:可以重复利用变量,避免垃圾回收,可以用来保存一个需要持久保存的变量, 缺点: 闭包较多的时候,会增大消耗内存,在IE浏览器里面会导致内存泄漏 解决方法:防抖,节流,函数嵌套函数避免全局污染的时候 6.内存泄漏怎么理解? JS里已经分配内存地址的对象, .但是由于长时间没有释放或者没办法清除,造成长期占用内存的现象,会让内存资源大幅浪费,最终导致运行速度慢,甚至崩溃的情况。 因素:一些未声明直接赋值的变量:一些未清空的定时器;过度的闭包;一些引用元素没有被清除 7.事件委托是什么? 又叫事件代理,原理就是利用了事件冒泡机制来实现,也就是说把子元素的事件绑定到父元素的身上。 子元素阻止了事件冒泡,那么事件委托也就不成立 阻止事件冒泡:event.stopPropagation() addEventListener('click',函数名,true/false) 默认是false(事件冒泡),true(事件捕获) 好处:提高性能,减少事件的绑定,也就减少了内存的占用 8.基本数据和引用数据类型的区别? 基本数据类型:String Number Boolean undefined null 基本数据类型保存在栈内存当中,保存的就是一个具体的值 引用数据类型(复杂数据类型): Object Function Array 引用数据类型是保存在堆内存中,声明一个引用数据类型的变量,它保存的是引用数据类型的地址 假如声明两个引用类型同时指向了一个地址的时候,修改其中一个那么另外一个也会改变 9.什么是原型,什么是原型链 ? 1、什么是原型? 原型prototype:这个属性对应着一个对象,这个对象就是原型对象。 2、什么是原型链? 当我们使用一个对象的属性或方法时,首先会在自身中寻找, 自身有,则直接使用; 自身没有则去原型对象中寻找,原型对象中有,则使用; 再没有则去原型的原型中寻找 ,这个过程就是原型链。 10.new操作符具体做了什么? 1.先创建一个空对象 2.把空对象和构造函数通过原型链进行链接 3.把构造函数的this绑定到新的空对象身上 4.根据构造函数返回的类型判断,如果是值类型,则返回对象,如果是引用类型,就要返回这个引用类型 11.JS是如何实现继承的? 1.原型链继承 2.借用构造函数继承 3.组合式继承 4.ES6的class类继承 12.Js的设计原理是什么? 同步:从头到尾 ,一行一行执行代码 异步:可以改变程序正常执行顺序(从头到尾)的操作就可以看成是异步操作。 13.Js中关于this指向的问题 1.全局对象中的this指向 指向的是window 2.全局作用域或者普通函数中的this 指向全局window 3.this永远指向最后调用它的那个对象 在不是箭头函数的情况下 4.new 关键词改变了this的指向 5. apply,call,bind 可以改变this指向,不是箭头函数 6.箭头函数中的this 它的指向在定义的时候就已经确定了 箭头函数它没有this,看外层是否有函数,有就是外层函数的this,没有就是window 7.匿名函数中的this 永远指向了window,匿名函数的执行环境具有全局性,因此this指向window14.script标签里的async和defer有什么区别? 当没有async和defer这两个属性的时候, 浏览器会立刻加载并执行指定的脚本 有async 加载和渲染后面元素的过程将和script的加载和执行并行进行(异步) 有defer 加载和渲染后面元素的过程将和script的加载并行进行(异步),但是它的执行事件要等 所有元素解析完成之后才会执行 15.setTimeout最小执行时间是多少? HTML5规定的内容: setTimeout最小执行时间是4ms setInterval最小执行时间是10ms 16.ES6和ES5有什么区别? JS的组成:ECMAScript BOM DOM ES5:全称(ECMAScript5),2009年ECMAScript的第五次修订,ECMAScript2009 ES6:全程(ECMAScript6),2015年ECMAScript的第六次修订,ECMAScript2015,是Js的下一个版本标准 17.ES6的新特性有哪些? 1.新增声明变量关键词(let const) 2.class类 54.解构赋值 5.扩展运算符 6.箭头函数 7.数组新增API 8.Promise封装 9.新增模块化(import,export) 10.新增set和map数据结构 18.call,aply,bind三者有什么区别? 都是改变this指向和函数的调用,call和apply的功能类似,只是传参的方法不同 cal1方法传的是一个参数列表 apply传递的是一个数组 bind传参后不会立刻执行,会返回一个改变了this指向的函数,这个函数还是可以传参的,bind()() call方法的性能要比apply好一些,所以cal1用的更多一点 19.用递归的时候有没有遇到什么问题? 如果一个函数内可以调用函数本身,那么这个就是递归函数 函数内部调用自己 特别注意:写递归必须要有退出条件return 20.如何实现一个深拷贝? 深拷贝就是完全拷贝一份新的对象,会在堆内存中开辟新的空间,拷贝的对象被修改后,原对象不受影响 主要针对的是引用数据类型(以下就是改变深拷贝方法) 1.扩展运算符 2.JSON.parse(JSON.stringify()) 3.利用递归函数实现 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |